<template>
  <div class="centered-content">
    <div class="registration-form">
      <div class="form-title">高校办公用品管理系统</div>
      <el-form ref="employee" :model="employee" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="employee.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="employee.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="userType">
          <el-select v-model="employee.userType" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">登录</el-button>
          <router-link to="/register">没有账号？点击注册</router-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { login } from '@/api/login'

export default {
  name: 'LoginPage',
  data () {
    return {
      confirmPassword: '',
      employee: {
        name: 'admin',
        password: '123456',
        userType: 9
      },
      options: [
        {
          value: 1,
          label: '教职工'
        },
        {
          value: 2,
          label: '仓库管理员'
        },
        {
          value: 9,
          label: '管理员'
        }
      ]
    }
  },
  methods: {
    async handleSubmit () {
      // 在这里处理提交逻辑，例如向后端发送注册请求等
      const res = await login(this.employee)
      Message.success({
        message: '登录成功',
        type: 'success'
      })
      this.$store.commit('emp/setEmpInfo', res.data)
      this.$router.push('/systems')
    }
  }
}
</script>

<style scoped>
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.registration-form {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #ffffff; /* 设置表单背景颜色 */
}

.form-title {
  font-size: 24px;
  color: rgb(72, 104, 207); /* 设置标题字体颜色为蓝色 */
  margin-bottom: 20px;
  text-align: center;
}

a:-webkit-any-link {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding: 20px;
  color: rgba(11, 47, 155, 0.918);
  cursor: pointer;
  text-decoration: none;
}

a:-webkit-any-link:hover {
  text-decoration: underline;
  color: rgba(16, 75, 252, 0.918);
}

.centered-content {
  background: url('@/assets/3bf2703b846f42501ca3c4fbb66fe3fc_r.png');
}
</style>
